<template>
  <div class="chat">
    <div class="chat__header">
      <span>消息</span>
    </div>
    <div class="chat__main">
      <div class="chat__main__nav">
        <div class="chat__main__nav__header">
          <span>对话</span>
          <div>
            <el-button style="background-color: #F4F9FD;"><icon-ic-outline-search style="font-size: 30px;" /></el-button>
            <el-button type="primary"><icon-material-symbols-add /></el-button>
          </div>
        </div>
        <div class="chat__main__nav__group">
          <el-collapse v-model="messageGroup" @change="setMessageGroup">
            <el-collapse-item title="群组" name="crowd">
              <Item v-for="_ in 20" />
            </el-collapse-item>
            <el-collapse-item title="消息" name="message">
              <Item v-for="_ in 7" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="chat__main__body">
        <div class="chat__main__body__header">
          <div class="title">
            <img src="@/assets/vue.svg" />
            <div>
              <span>医疗应用团队</span>
              <span>6个成员</span>
            </div>
          </div>
          <div>
            <el-button style="background-color: #F4F9FD;"><icon-ic-outline-search style="font-size: 30px;" /></el-button>
            <el-button style="background-color: #F4F9FD;"><icon-pajamas-thumbtack
                style="position: relative; transform: rotate(-45deg);" /></el-button>
            <el-button style="background-color: #F4F9FD;"><icon-ph-dots-three-outline-vertical-fill /></el-button>
          </div>
        </div>
        <div class="chat__main__body__main" style="height: calc(100% - 80px);">
          <div class="message_view">
            <MessageItem v-for="_ in 10" />
          </div>
          <FixedInput />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Item from './item.vue';
import FixedInput from './fixed_input.vue';
import MessageItem from './message_item.vue';

type TMessageGroup = 'crowd' | 'message'
const messageGroup = ref<TMessageGroup[]>(["crowd", "message"])

function setMessageGroup(e: any) {
  console.log(e);

}

</script>

<style lang="scss" scoped>
@mixin header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  height: 80px;
  box-sizing: border-box;
}

.chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 10px;
  box-sizing: border-box;

  &__header {
    text-align: left;
    margin: 30px 0;

    >span {
      font-size: 30px;
    }
  }

  &__main {
    position: relative;
    background-color: white;
    border-radius: 10px;
    flex: 1;
    display: flex;
    overflow: hidden;

    :deep(.el-button) {
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
    }

    &__nav {
      width: 340px;
      height: 1034px;
      border-right: 1px solid #ccc;

      &__header {
        @include header;

        >span {
          font-size: 20px;
        }
      }

      &__group {
        background-color: white;
        padding: 10px 20px;
        overflow-y: scroll;
        height: 1034px;

        &::-webkit-scrollbar {
          display: none;
        }

      }


    }

    &__body {
      flex: 1;

      &__header {
        @include header;


        >.title {
          display: flex;
          gap: 10px;

          >img {
            border-radius: 50%;
          }

          >div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            >span {
              &:nth-of-type(1) {
                font-size: 16px;
              }

              &:nth-of-type(2) {
                font-size: 12px;
                color: #ccc;
              }
            }
          }
        }


      }

      &__main {
        perspective: 0;

      }
    }
  }
}

.message_view {
  height: 880px;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>